<template>
  <div class="app">
    <div class="edit">
      <div>
        <van-icon
          name="arrow-left"
          @click="fh"
          style="
            float: left;
            font-size: 20px;
            margin-left: 10px;
            margin-top: 10px;
          "
        />
      </div>
      <div class="edit_data">编辑生日</div>
    </div>
    <div class="main">
      <van-cell is-link @click="showPopup" class="data">生日信息</van-cell>
      <span style="font-size: 10px; margin-left: 16px">
        是否在个人页展示
        <van-field name="switch" label="展示生日标签">
          <template #input>
            <van-switch v-model="switchChecked" size="20" />
          </template>
        </van-field>
      </span>
      <div class="radi">
        <van-radio-group v-model="radio" checked-color="red">
          <van-cell-group>
            <van-cell title="单选框 1" clickable @click="radio = '1'">
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell title="单选框 2" clickable @click="radio = '2'">
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
    </div>

    <van-popup v-model="show" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        @cancel="cance"
        confirm-button-text="保存"
        @confirm="cance1"
      />
    </van-popup>
  </div>
</template>

<script>
import timeUtil from "@/utils/time";

export default {
  data() {
    return {
      show: false,
      currentDate: "",
      switchChecked: false,
      radio: 0,
      showTime: "",

    };
  },

  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
    showPopup() {
      this.show = true;
    },
    cance1(value) {
      this.show = false;
      let showTime = timeUtil.formatTime(value, false);
      this.showTime = showTime;
      // console.log(showTime);
      this.ye();
    },
    cance() {
      this.show = false;
    },
    fh() {
      this.$router.push("/mint");
    },
  }
};
</script>

<style scoped>
.van-popup.van-popup--center {
  width: 100%;
  height: 300px;
}
button {
  color: #ff0000 !important;
}
.edit {
  margin-top: 20px;
  display: flex;
  font-size: 18px;
  padding: 10px;
}

.edit_data {
  margin-left: 125px;
}
.main {
  padding: 2px 15px;
  /* background: #000; */
}
.data {
  border-radius: 15px;
  color: black;
  margin-bottom: 10px;
}
.van-cell.van-field {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.van-field__control--custom {
  flex-direction: row-reverse !important;
}
.van-switch {
  margin-left: 180px;
}
.radi {
  margin-top: 10px;
}
.app {
  width: 100vw;
  height: 100vh;
  background: #f6f6f6;
}
</style>